<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas width="600" height="400" id="canvas"></canvas>
</body>
<script>
    var cav = document.getElementById('canvas')
const ctx = cav.getContext('2d');
// 设置起点
ctx.lineWidth = 10
// 设置画笔颜色
ctx.strokeStyle = 'red'
//设置端的样式 默认butt || round || square
// ctx.lineCap = 'round';
// ctx.lineCap = 'square';
// 设置拐角类型 miter| round | bevel
// ctx.lineJoin = 'round'
// ctx.lineJoin = 'bevel'
ctx.moveTo(10,10)
// 设置终点 绘制多条时，会以上一个终点作为下一个起点
ctx.lineTo(100,10)
ctx.lineTo(100,100)
ctx.stroke();

ctx.lineWidth = 1
// 绘制三角形
ctx.moveTo(0,200)
ctx.lineTo(100,120)
ctx.lineTo(200,200)
ctx.lineTo(0,200)
ctx.stroke();

// 矩形
ctx.moveTo(200,50)
ctx.lineTo(400,50)
ctx.lineTo(400,150)
ctx.lineTo(200,150)
// ctx.lineTo(200,50)
// 自动链接起点和终点 形成一个封闭区域
ctx.closePath();
ctx.stroke();
</script>
</html>